
<template>
  <div class="page-content">
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <!--banner轮播-->
    <div class="my-swiper-container">
      <div class="swiper-container" ref="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="banquet in banquetList" :key="banquet.id">
            <div class="banquet-card" @click="toDetail(banquet.id)" :class="{'banquet-card-unseal': !banquet.isSeal}">
              <div>序号{{banquet.id}}</div>
              <div>{{banquet.name}}</div>
              <div>{{banquet.reason}}</div>
              <div>{{banquet.remark}}</div>
              <div>{{banquet.crtTime}}</div>
              <div @mouseover.stop="hoverSeal(banquet)"
                   @mouseout.stop="hoverOutSeal(banquet)"
                   :class="{'banquet-card-seal-opt': banquet.hover}"
                   @click.stop="sealOpt(banquet)"
              >{{banquet.hover ? banquet.sealOptText : banquet.isSealName}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" icon="el-icon-plus" class="add" @click="addBanquet"></el-button>
  </div>
</template>

<script>
import ResultUtil from "@/utils/ResultUtil";
import { Swiper,EffectCoverflow} from 'swiper';
import { Message } from 'element-ui';
Swiper.use(EffectCoverflow);
export default {
  name:'BanquetList2',
  data(){
    return {
      banquetList: [],
    }
  },
  methods:{
    async getBanquetList(){
      let result = await this.$API.reqBanquetList();
      if(ResultUtil.isSuccess(result)){
        let banquetList = result.data || [];
        //加上hover、操作字段
        banquetList.forEach( v => {
          v.hover = false;
          v.sealOptText = v.isSeal ? "解除封存" : "封存该酒席";
        });
        this.banquetList = banquetList;
      }
    },
    addBanquet(){
      this.$router.push(`/banquet/add`)
    },
    toDetail(id){
      this.$router.push(`/banquet/giftMoneyList?banquetId=${id}`)
    },
    hoverSeal(banquet){
      banquet.hover = true;
    },
    hoverOutSeal(banquet){
      banquet.hover = false;
    },
    async sealOpt(banquet){
      if(!banquet.hover) {
        Message({
          message: '程序错误',
          type: 'error',
          duration: 5000,
          showClose: true,
          center: true
        });
        return;
      }
      let result;
      if(banquet.isSeal) {
        result = await this.$API.reqBanquetUnSeal({id:banquet.id});
      }else{
        result = await this.$API.reqBanquetSeal({id:banquet.id});
      }
      if(ResultUtil.isSuccess(result)){
        this.getBanquetList();
      }
    }
  },
  watch: {
    banquetList: {
      handler() {
        this.$nextTick(() => {
          new Swiper('.swiper-container', {
            //loop:true,//会让绑定到每一个复制的silde的事件失效
            effect: 'coverflow',
            slidesPerView: 3,
            centeredSlides: true,
            coverflow: {
              rotate: 30,
              stretch: 10,
              depth: 60,
              modifier: 2,
              slideShadows : false
            }
          });
        });
      },
    },
  },
  mounted() {
    this.getBanquetList();
  }
}
</script>

<style scoped>
.page-content {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.add{
  position: absolute;
  top: 20px;
  right: 0;
}

.my-swiper-container {
  width: 1000px;
}


.banquet-card{
  width: 300px;
  height: 400px;
  border-radius: 20px;
  margin: 20px 20px;
  transition: 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;

  border: 1px solid #fff;
  font-size: 18px;
  background:rgb(255,255,255,0.1);
  /*backdrop-filter: blur(5px);*//*会引起swiper卡顿 空白的问题*/

  font-family: 'shou_xie_ti',sans-serif;
  font-weight: bold;
  font-size: 30px;
}

.banquet-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #409EFF;
  font-size: 34px;
}

.banquet-card-unseal {
  color: #409EFF;
}

.banquet-card .banquet-card-seal-opt:hover{
  padding: 2px;
  color:#409EFF;
  border: 1px solid #409EFF;
  border-radius: 5px;
  box-shadow: 0 0 5px;
}

.banquet-card div {
  cursor: pointer;
  margin: 15px 0px;
}

.page-content .color{
  position: absolute;
  filter: blur(200px);
}

.page-content .color:nth-child(1){
  top: -350px;
  width: 600px;
  height: 600px;
  background: #ff359b;
}

.page-content .color:nth-child(2){
  bottom: 100px;
  left: 100px;
  width: 500px;
  height: 500px;
  background: #fffd87;
}

.page-content .color:nth-child(3){
  bottom: 150px;
  right: 100px;
  width: 500px;
  height: 500px;
  background: #00d2ff;
}

</style>
